<template><div class="container">
  <header class="mui-bar mui-bar-nav">
<router-link to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mback"></router-link> 
  <h1 class="mui-title">订单列表</h1>
  </header>
  <div class="mui-content">
  <div id="slider" class="mui-slider">
  <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
  <a class="mui-control-item">
  待发货
  </a>
  <a class="mui-control-item">
  已发货
  </a>
  <a class="mui-control-item">
  已取消
  </a>
  </div>
  <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
  <div class="mui-slider-group orderlist">
  <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
  <div id="scroll1" class="mui-scroll-wrapper">
  <div class="mui-scroll">
  <ul class="mui-table-view">
  <li class="mui-table-view-cell" v-for="item in items" key="item">
	  <div class="dangping" v-show="item.show">
  <div class="mui-table">
                 <div class="mui-table-cell mui-col-xs-5">
                   <p class="mui-h6 mui-ellipsis">订单号：{{item.danhao}} </p>
                 </div>
                 <div class="mui-table-cell mui-col-xs-7 mui-text-right">
                   <p class="mui-h6 mui-ellipsis">签收：{{item.qssj}}</p>
                 </div>
             </div>
             <div class="mui-table">
                 <div class="mui-table-cell mui-col-xs-12">
                     <h4 class="mui-ellipsis-2">{{item.chufa}}-{{item.mdd}}</h4>
                 </div>
             </div>
             <div class="mui-table">
                 <div class="mui-table-cell mui-col-xs-12">
                   <a class="mui-btn mui-btn-primary mui-pull-right">评价</a>
                   <a class="mui-btn mui-btn-default mui-pull-right" @click="toggle(item)">删除订单</a>
                 </div>
             </div></div>
  </li>

  </ul>
  </div>
  </div>
  </div>
  <div id="item2mobile" class="mui-slider-item mui-control-content">
  <div id="scroll2" class="mui-scroll-wrapper">
  <div class="mui-scroll">
  <div class="mui-loading">
  <div class="mui-spinner">
  </div>
  </div>
  </div>
  </div>
  
  
  </div>
  <div id="item3mobile" class="mui-slider-item mui-control-content">
  <div id="scroll3" class="mui-scroll-wrapper">
  <div class="mui-scroll">
  <div class="mui-loading">
  <div class="mui-spinner">
  </div>
  </div>
  </div>
  </div>
  
  
  </div>
  </div>
  </div>
  
  
  </div></div>

</template>

<script>
    export default {
        name: "Category",
		data(){
			return{
				items: [{
				    content: '1 item',
				    show: true,
					danhao:28336424324,
					chufa:'厦门',
					mdd:'莆田',
					qssj:'2022年5月31日 14:25:47'
				   }, {
				    content: '2 item',
				    show: true,
					danhao:2829387442,
					chufa:'福州',
					mdd:'三明',
					qssj:'2022年5月29日 12:24:23'
				   }, {
				    content: '3 item',
				    show: true,
					danhao:22384243423,
					chufa:'龙岩',
					mdd:'泉州',
					qssj:'2022年5月23日 08:43:23'
				   }],
				   
				   
				   
				   
			}
		},
		 methods: {
		  toggle: function(item) {
		      item.show = !item.show;
		  }}
    }
</script>

<style scoped>
.mui-control-content {
background-color: white;
min-height: 415px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
.orderlist input, .orderlist button, .orderlist .mui-btn {

margin-left: 10px;
}


</style>

